Code Organization (1/4)
How do you structure a large Svelte/SvelteKit project?

    When working on large Svelte or SvelteKit projects, it's important to organize your code for maintainability, scalability, and clarity. A well-structured project separates concerns, makes components reusable, and organizes routes, stores, and utilities effectively.

    Example: Recommended Project Structure

    Use the SvelteKit file-based routing system to organize pages. Nested folders create nested routes. Use `+page.svelte` for the page component and `+page.js` or `+page.server.js` for data loading.

    Keep reusable UI elements in the `lib/components/` folder. Break complex UI into smaller, self-contained components. Use `bind:this` or props to communicate with parent components when needed.

    Centralize shared state in `lib/stores/`. Use writable, readable, or derived stores for reactive state management. Keep stores small and focused to avoid coupling unrelated features.

    Put reusable functions, formatters, or constants in `lib/utils/`. This helps reduce duplication and keeps your logic modular.

    Use scoped styles inside components or global CSS in `src/app.css`. For larger projects, consider CSS modules, TailwindCSS, or Svelte preprocessors for consistent styling.

    Best practices for large projects:
    • Organize routes, components, stores, and utilities clearly.
    • Break UI into small, reusable components.
    • Use SvelteKit’s file-based routing for nested routes.
    • Centralize shared state in stores and avoid prop-drilling.
    • Keep styles modular and consistent across components.
    • Write unit tests and use consistent code conventions for maintainability.